﻿@page "/components/progress"

<DocsPage>
    <DocsPageHeader Title="Progress" SubTitle="Progress indicators that either shows the length of a process or unspecified wait time also known as indeterminate. The animations is done with SVG's and CSS.">
        <Description>
            <div class="mt-6">
                Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.
            </div>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>
        <MudGrid>
            <MudItem md="6">
                <MudText Typo="Typo.h6" Color="Color.Primary">Determinate indicators</MudText>
                <MudText>
                    <b>Determinate</b> indicators display how long a process will take. They should be used when the process completion rate can be detected.
                </MudText>
            </MudItem>
            <MudItem md="6">
                <MudText Typo="Typo.h6" Color="Color.Secondary">Indeterminate indicators</MudText>
                <MudText>
                    <b>Indeterminate</b> indicators express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.
                </MudText>
            </MudItem>
        </MudGrid>
    </DocsPageContent>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Circular</Title>
                <SubTitle>Circular indeterminate</SubTitle>
            </SectionHeader>
            <SectionContent Outlined="true">
                <ProgressCircularInterminateExample />
            </SectionContent>
            <SectionSource Code="ProgressCircularInterminateExample" GitHubFolderName="Progress"  />
            <SectionHeader>
                <SubTitle>Circular determinate</SubTitle>
            </SectionHeader>
            <SectionContent Outlined="true">
                <ProgressCircularDeterminateExample />
            </SectionContent>
            <SectionSource Code="ProgressCircularDeterminateExample" GitHubFolderName="Progress"  />
            <SectionHeader>
                <SubTitle>Circular Sizes</SubTitle>
                <Description>You can change the size with the pre defined <CodeInline>Size</CodeInline> prop or change the <CodeInline>Width</CodeInline> and <CodeInline>Height</CodeInline> in css.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <ProgressCircularSizesExample />
            </SectionContent>
            <SectionSource Code="ProgressCircularSizesExample" GitHubFolderName="Progress" />
        </DocsPageSection>
        <DocsPageSection>

            <SectionHeader>
                <Title>Linear</Title>
                <SubTitle>Linear indeterminate</SubTitle>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <ProgressLinearInterminateExample />
            </SectionContent>
            <SectionSource Code="ProgressLinearInterminateExample" GitHubFolderName="Progress" />

            <SectionHeader>
                <SubTitle>Linear determinate</SubTitle>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <ProgressLinearDeterminateExample />
            </SectionContent>
            <SectionSource Code="ProgressLinearDeterminateExample" ShowCode="false" GitHubFolderName="Progress" />

            <SectionHeader>
                <SubTitle>Min and Max</SubTitle>
                <Description>
                    Per default, the value range is between 0 and 100. If you have a custom range set Min and Max accordingly.
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-progress">
                <ProgressLinearMinMaxExample />
            </SectionContent>
            <SectionSource Code="ProgressLinearMinMaxExample" ShowCode="false" GitHubFolderName="Progress" />

            <SectionHeader>
                <SubTitle>Linear buffer</SubTitle>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <ProgressLinearBufferExample />
            </SectionContent>
            <SectionSource Code="ProgressLinearBufferExample" GitHubFolderName="Progress" />

        </DocsPageSection>
    </DocsPageContent>
</DocsPage>